<template>
	<view class="localdetail" v-if="goodsData.swiperList">
		<u-swiper :list="goodsData.swiperList" @click="clickSwiper" height="580" imgMode="aspectFit"></u-swiper>
		<!-- <image src="../../static/banner/1.jpg" mode="aspectFit" ></image> -->
		<!-- 宠物商品页 -->
		<view class="content relative">
			<view class="name">
				【产品类型】{{types}}
			</view>
			<view class="name">
				【产品名称】{{goodsData.name}}
			</view>
			<view class="date">
				【产品价格】<text style="color: orange;">￥ {{goodsData.money}}</text>
			</view>

			<view class="detailbox">
				<view class="detailtext">
					<view class="">
						【产品规格】：{{goodsData.weight}} kg
					</view>
					<view class="">
						【适用年龄段】：{{goodsData.old}}
					</view>
					<view class="">
						【卖家产品介绍】：{{goodsData.detail}}
					</view>
					<view class="">
						【特殊效果】：{{goodsData.note}}
					</view>
				</view>
				<view class="videos" v-if="goodsData.videoSrc">
					<video :src="goodsData.videoSrc" style="width: 100%;" controls></video>
				</view>
				<view class="detailimg">
					<image :src="i" mode="" v-for="i in goodsData.detailList" @click="preimg"  style="width: 90vw"></image>
				</view>
				<view class="wranning">
					本平台负责监督发布内容，如果您发现有人发布内容涉嫌违规请点击举报，一经证实，发布者将被平台交由相关部门处置！
				</view>
			</view>
			<view class=" flex bt">
				<view style="width: 200rpx;padding-top: 10rpx;">
					<u-button type="error" text="举报该帖" @click="report"></u-button>
				</view>
				<view style="width: 200rpx;padding-top: 10rpx;">
					<u-button type="success" text="购买" @click="buy"></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list1: [],
				text: "",
				show: false,
				goodsid: null,
				detailImg: [],
				goodsData: {}
			};
		},
		onLoad(props) {
			console.log(props)
			// this.$db.collection('swiperList').limit(10).get().then(res => {
			// 	this.list1 = res.data.map(item => item.src)
			// 	// console.log(this.list1, 'client')
			// })
			if (props.goodsid) {
				this.goodsid = props.goodsid
				this.searchGoods(this.goodsid)
			}
		},
		computed: {
			types() {
				switch (this.goodsData.goodsType) {
					case "0":
						return '狗粮';
					case "1":
						return '猫粮';
					case "2":
						return '宠物日用';
					case "3":
						return '宠物保健';
					default:
						// 添加default分支，处理未知的goodType值
						return '未知类型';
				}
			}
		},
		methods: {
			clickSwiper(e) {
				// console.log(this.list1[e])
				uni.previewImage({
					urls: this.goodsData.swiperList,
				})
			},
			concat() {
				uni.makePhoneCall({
					phoneNumber: '114' //仅为示例
				});
				// this.$refs.uToast.show({
				// 	type: 'error',
				// 	title: '失败主题',
				// 	message: "一弦一柱思华年",
				// })
			},
			buy() {
				console.log("buy")
			},
			preimg() {
				uni.previewImage({
					urls: this.goodsData.detailList,
				})
			},
			report() {
				console.log("举报该贴：", this.goodsid)
			},
			async searchGoods(id) {
				let res = await wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'searchGoods', //捡到、找到
						id
					}
				})
				console.log("res:-", res.result)
				this.goodsData = res.result
				// this.list1=res.result.swiperList
				// this.detailImg=res.result.detailList
			}
		}
	}
</script>

<style lang="scss" scoped>
	.localdetail {
		.content {
			background-color: $uni-color-primary;
			border-radius: $uni-border-radius-lg;
			color: white;
			min-height: 800rpx;
			padding: $uni-spacing-row-base;

			.name,
			.date {
				font-weight: 600;
				font-size: $uni-font-size-lg;
			}

			.detailbox {
				margin-top: $uni-spacing-row-base;
				padding: $uni-spacing-row-base;
				background-color: white;
				color: #000;
				font-weight: 600;
				border-radius: $uni-border-radius-lg;
				min-height: 200rpx;
				max-height: 600rpx;
				overflow-y: auto;
			}

		}
	}
</style>